<template>
  <h2>{{ route.meta.title }}</h2>
  <div class="content">
    <div>当前电话: <div>{{ adminArr.admin_iphone }}</div>
    </div>
    <div>新的电话: <div>
        <el-input v-model="newIphone" size="small" placeholder="请输入新电话号码" />
      </div>
    </div>
    <el-button type="primary" @click="changePsw">确认修改</el-button>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted } from 'vue'
import http from '../../utils/http'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
export default {
  setup() {
    const route = useRoute()
    const data = reactive({
      adminArr: {},
      newIphone: '',
      changePsw() {
        http({
          url: '/updateAdminIphone',
          method: 'post',
          data: {
            admin_id: data.adminArr.admin_id,
            admin_iphone: data.newIphone
          }
        })
          .then((resq) => {
            if (resq.data.code == 200) {
              data.getAdmin()
              ElMessage({
                showClose: true,
                message: '更新成功',
                type: 'success',
              })
              data.newIphone = ''
            }
          })
          .catch(() => ElMessage.error('更新失败'))
      },
      getAdmin() {
        http({
          url: '/getAdminData',
          method: 'get'
        })
          .then((res) => {
            data.adminArr = res.data.data[0]
          })
          .catch(() => ElMessage.error('获取数据失败'))
      }
    })

    onMounted(() => {
      data.getAdmin()
    })

    return { ...toRefs(data), route }
  }
}
</script>

<style lang="scss" scoped>
h2 {
  margin: 0;
  font-size: 18px;
}

.content {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  font-size: 14px;
  width: 20%;
  height: 200px;
  margin-top: 1%;
  background-color: rgba(242, 242, 242, .6);

  div div {
    display: inline-block;
    width: 160px;
  }
}
</style>